<template>
	<div>

		<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />

		<div class="container">

			<!-- Table -->
			<div class="table-container">
				<el-table v-loading="loading" :data="tableData" style="width: 100%" :stripe="true">
					<el-table-column type="expand" align="center">
						<template #default="props">
							<div class="card-container">
								<el-card v-for="detail in props.row.teachClassList" :key="detail.teacher" class="cards"
									shadow="hover">
									<el-descriptions :column="2" :border="1" direction="vertical">
										<el-descriptions-item label="授课教师">{{ detail.teacher.name
											}}</el-descriptions-item>
										<el-descriptions-item label="上课学期">{{ detail.semester }}</el-descriptions-item>
										<el-descriptions-item label="周数">{{ detail.start_week }}-{{ detail.end_week
											}}</el-descriptions-item>
										<el-descriptions-item label="已选/容量">{{ detail.selected }}/{{ detail.capacity
											}}</el-descriptions-item>
									</el-descriptions>

									<div class="button-container">
										<el-button class="button" type="primary"
											@click="handleSession(detail.tc_id)">时间</el-button>
										<el-popconfirm title="是否确认选择该课程?" @confirm="confirmSelection(detail)">
											<template #reference>
												<el-button type="primary" :disabled="props.row.disabled"
													class="button">{{ props.row.disabled ? "已选课" : "选课" }}</el-button>
											</template>
										</el-popconfirm>
									</div>
								</el-card>
							</div>
						</template>
					</el-table-column>
					<!-- 表头项 -->
					<el-table-column align="center" label="课程编号" prop="course_id" />
					<el-table-column align="center" label="课程名" prop="name" />
					<el-table-column align="center" label="简介" prop="description" />
					<el-table-column align="center" label="学院" prop="college.name" />
					<el-table-column align="center" label="学分" prop="credit" />
				</el-table>

				<el-dialog v-model="dialogVisible" title="课程时间表" width="500" :before-close="handleClose">
					<el-table :data="tableData" style="width: 100%" />
					<template #footer>
						<div class="dialog-footer">
							<el-table :data="sessionList" style="width: 100%" :stripe="true">
								<el-table-column label="开始" prop="start_time" />
								<el-table-column label="结束" prop="end_time" />
								<el-table-column label="星期" prop="weekday" />
								<el-table-column label="教室" prop="classroom" />
							</el-table>
							<el-button @click="dialogVisible = false">OK</el-button>

						</div>
					</template>
				</el-dialog>
			</div>

			<!-- Pagination -->
			<div class="pagination-container">
				<el-pagination background layout="total,prev, pager, next" @current-change="changePage"
					:total="page.total" :index="page.index" :page-size="page.size" />
			</div>
		</div>
	</div>
</template>




<script lang="ts" setup>

import { ref, reactive } from 'vue';
import { ElMessage, } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import { fetchCoursePage, fetchSessionByTcId, selectTeachClass, fetchStudentCourse } from '@/api/index';
import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import { TableItem } from '@/types/table';
import { FormOption, FormOptionList } from '@/types/form-option';


// 查询相关
const query = reactive({
	name: null,
	course_id: null,
	college_id: null
});
const searchOpt = ref<FormOptionList[]>([
	{ type: 'input', label: '课程名：', prop: 'name' },
	{ type: 'number', label: '课程号', prop: 'course_id' },
	{ type: 'number', label: '学院号', prop: 'college_id' }
])
const handleSearch = () => {
	changePage(1);
};
const page = reactive({
	index: 1,
	size: 10,
	total: 200,
})
const loading = ref(true);
const dialogVisible = ref(false);
const sessionList = ref([]);
const handleSession = async (tc_id) => {
	loading.value = true;
	let res = await fetchSessionByTcId(tc_id)
	sessionList.value = res.data;
	loading.value = false;
	dialogVisible.value = true;
};
const handleClose = () => {
	dialogVisible.value = false;
};
const changePage = async (val: number) => {
	loading.value = true;
	const res = await fetchCoursePage({ index: val, size: page.size }, query)
	let scres = await fetchStudentCourse({ index: 1, size: 1000000, sid: localStorage.getItem('sid') });
	let scList = scres.data.pageList;
	res.data.pageList.forEach(item => {
		item.collegeName = item.college.name + '(' + item.college.college_id + ')';
		//if item.tc_id in scList,set disabled to true
		item.disabled = false;
		scList.forEach(scItem => {
			if (scItem.teachClass.course_id == item.course_id) {
				item.disabled = true;
			}
		})

	})
	tableData.value = res.data.pageList;
	page.total = res.data.pageNumber;
	page.index = val;
	loading.value = false;
	console.log(tableData)
};

const tableData = ref<[]>([]);
const getData = async () => {
	changePage(page.index)
};
getData();

const confirmSelection = (detail) => {
	let tc_id = detail.tc_id
	console.log(tc_id)
	selectTeachClass(tc_id).then(
		(sucData) => {
			console.log(sucData)
			ElMessage.success(sucData.data);
			getData();
		}
	).catch(
		(err) => {
			console.log(err)
			ElMessage.error(err.response.data);
		}
	)
};


</script>

<style scoped>
.pagination-container {
	margin-top: 20px;
	/* Adjust as needed */
}

.card-container {
	display: flex;
	flex-wrap: wrap;
	/* 确保子项超过四个时能自动换行 */
	justify-content: flex-start;
	/* 对齐方式 */
}

.cards {
	margin: 8px;
	flex-basis: calc(25% - 20px);
	max-width: calc(25% - 20px);
}

.cards p {
	padding-left: 20px;
}

.button-container {
	display: flex;
}

.cards .button {
	margin-top: 8px;
	/*margin horizontal center*/
	flex-grow: 1;
}
</style>